<template>
	<view class="detail">
		<dwu-navbar title="订单详情" bgColor="#3D3D3D" color="#fff"></dwu-navbar>
		<view class="top">
			<image class="top-bg" src="@/static/order/top_bg.png" mode=""></image>
			<view class="info">
				<view class="title">
					<text>{{orderDetail.repair_name || '-'}}</text>
					<dwu-state :title="orderDetail.service_name"></dwu-state>
				</view>
				<view class="type">
					<text v-if="orderDetail.is_status == 0">待接单</text>
					<text v-else-if="orderDetail.is_status == 1">待上门</text>
					<text v-else-if="orderDetail.is_status == 2">服务中</text>
					<text v-else-if="orderDetail.is_status == 3">待评价</text>
					<text v-else-if="orderDetail.is_status == 4">已完结</text>
					<text v-else-if="orderDetail.is_status == 5">取消订单</text>
					<text v-else>-</text>
				</view>
				<view class="date">
					下单时间：{{orderDetail.createtime_text || '-'}}
				</view>
			</view>
			<image class="icon1" src="@/static/order/icon1.png" mode=""></image>
		</view>
		<view class="content">
			<view class="content-bg"></view>
			<view class="order-title order-title1">
				订单信息
			</view>
			<view class="order-info">
				<image class="item-bg" src="@/static/order/item_bg.png" mode=""></image>
				<view class="info-item">
					<view class="lable">
						订单编号
					</view>
					<view class="value">
						{{orderDetail.order_sn || '-'}}
					</view>
				</view>
				<view class="info-item">
					<view class="lable">
						设备类型
					</view>
					<view class="value">
						{{orderDetail.repair_name || '-'}}
					</view>
				</view>
				<view class="info-item">
					<view class="lable">
						品牌名称
					</view>
					<view class="value">
						{{orderDetail.brand_name || '-'}}
					</view>
				</view>
				<view class="info-item">
					<view class="lable">
						设备数量
					</view>
					<view class="value">
						{{orderDetail.facility_sum || '-'}}
					</view>
				</view>
				<view class="info-item">
					<view class="lable">
						期望上门时间
					</view>
					<view class="value">
						{{orderDetail.call_time_text || '-'}}
					</view>
				</view>
			</view>
			<view class="order-title">
				联系人信息
			</view>
			<view class="order-info">
				<image class="item-bg" src="@/static/order/item_bg.png" mode=""></image>
				<view class="info-item">
					<view class="lable">
						联系人姓名
					</view>
					<view class="value">
						{{orderDetail.name || '-'}}
					</view>
				</view>
				<view class="info-item">
					<view class="lable">
						联系人电话
					</view>
					<view class="value">
						{{orderDetail.phone || '-'}}
					</view>
				</view>
			</view>
			<view class="order-title">
				场地信息
			</view>
			<view class="address">
				<image class="address-bg" src="@/static/order/address_bg.png" mode=""></image>
				<view class="name">
					{{orderDetail.analysis_area || '-'}}
				</view>
				<view class="info">
					{{orderDetail.address || '-'}}
				</view>
			</view>
			<view class="order-title">
				故障描述
			</view>
			<view class="order-info">
				<image class="item-bg" src="@/static/order/item_bg.png" mode=""></image>
				<view class="introduce">
					{{orderDetail.breakdown_describe || '-'}}
				</view>
				<view class="photo">
					<image v-for="(item,index) in orderDetail.imgs" :key="index" :src="item" mode="" @tap="previewImage(item)"></image>
				</view>
			</view>
		</view>
		<block>

		</block>
		<view class="btns" v-if="orderDetail.is_status != 5 && orderDetail.is_status != 4 && orderDetail.is_status != 3">
			<view class="cancel" @click="ancelOrder" v-if="orderDetail.uuid == dwuUserinfo.user_id">
				取消订单
			</view>
			<block v-if="orderDetail.uuid == dwuUserinfo.user_id">
				<view class="confirm" @click="onJump('/subpackage/order/add?id='+orderDetail.id)"
					v-if="orderDetail.is_status == 0">
					修改订单
				</view>
			</block>
			<block v-if="orderDetail.uuid == dwuUserinfo.user_id">
				<view class="confirm" @click="arrive" v-if="orderDetail.is_status == 1">
					确认已到达
				</view>
			</block>
			<block v-if="orderDetail.uuid == dwuUserinfo.user_id">
				<view class="confirm" @click="accomplish" v-if="orderDetail.is_status == 2">
					确认完成
				</view>
			</block>
		</view>
		<view class="btns" @click="onJump(`/subpackage/order/evaluate?order_id=${orderDetail.id}&order_sn=${orderDetail.order_sn}`)" v-if="orderDetail.is_status == 3 && orderDetail.uuid == dwuUserinfo.user_id">
			<view class="confirm">
				去评价
			</view>
		</view>
		<!-- <view class="btns" @click="onJump(`/subpackage/order/evaluate?order_id=${orderDetail.id}`)" v-if="orderDetail.is_status == 4">
			<view class="confirm">
				去评价
			</view>
		</view> -->
		<dwu-modal ref="dwuModal"></dwu-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				orderDetail: {},
				dwuUserinfo: {}
			};
		},
		onLoad(opeions) {
			this.id = opeions.id
			let dwuUserinfo = uni.getStorageSync('dwu_userinfo')
			this.dwuUserinfo = dwuUserinfo
		},
		onShow() {
			this.getOrderDetail()
		},
		methods: {
			previewImage(e){
				uni.previewImage({
					current:e,
					urls: this.orderDetail.imgs
				})
			},
			getOrderDetail() {
				this.request.http('/order/orderDetail', 'post', {
					id: this.id
				}).then(res => {
					let data = res.data
					if (data.code == 1) {
						this.orderDetail = data.data
						this.orderDetail.imgs = this.orderDetail.attachments_img ? this.orderDetail.attachments_img
							.split(',') : []
						this.amap.getAddressByLatLng(data.data.address_lat, data.data.address_lng).then(
							ress => {
								this.orderDetail.analysis_address = ress.formatted_address
								this.orderDetail.analysis_area = ress.aois.length == 0 ? ress.roads[0].name : ress.aois[0].name
								this.$forceUpdate()
							})
					}
				})
			},
			arrive() {
				this.$refs.dwuModal.open({
					content: '是否确认订单已到达？',
					success: (res) => {
						this.request.http('/sfuser/qrarrive', 'post', {
							order_id: this.id
						}).then(res => {
							let data = res.data
							if (data.code == 1) {
								this.getOrderDetail()
							}
						})
					}
				})
			},
			accomplish() {
				this.$refs.dwuModal.open({
					content: '是否确认订单已完成？',
					success: (res) => {
						this.request.http('/order/qrorder', 'post', {
							order_id: this.id
						}).then(res => {
							let data = res.data
							if (data.code == 1) {
								this.getOrderDetail()
							}
						})
					}
				})
			},
			ancelOrder() {
				this.$refs.dwuModal.open({
					content: '是否取消当前订单？',
					success: (res) => {
						this.request.http('/order/ancelOrder', 'post', {
							id: this.id
						}).then(res => {
							let data = res.data
							if (data.code == 1) {
								this.getOrderDetail()
							}
						})
					}
				})
			},
			onJump(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #f7f9f9;
	}

	.detail {
		.top {
			position: relative;

			.top-bg {
				position: absolute;
				width: 100%;
				height: 573rpx;
				z-index: 1;
			}

			.info {
				padding-top: 92rpx;
				padding-left: 75rpx;
				position: relative;
				z-index: 10;

				.title {
					display: flex;
					align-items: center;

					&>text {
						margin-right: 25rpx;
						font-weight: 600;
						font-size: 27rpx;
						color: #FFFFFF;
						line-height: 38rpx;
					}
				}

				.type {
					margin-top: 13rpx;
					font-weight: 400;
					font-size: 23rpx;
					color: #979797;
					line-height: 33rpx;
					border: 4rpx solid #979797;
					border-radius: 8rpx;
					width: max-content;
					padding: 0 4rpx;
				}

				.date {
					margin-top: 21rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 21rpx;
					color: #868686;
				}
			}

			.icon1 {
				position: absolute;
				top: 0;
				right: 70rpx;
				width: 238rpx;
				height: 307rpx;
				z-index: 10;
			}
		}

		.content {
			margin-top: 10rpx;
			position: relative;
			z-index: 10;
			padding: 8rpx;
			background-color: #f7f9f9;
			border-radius: 38rpx 38rpx 0 0;

			.content-bg {
				position: absolute;
				z-index: 1;
				top: 0;
				width: 100%;
				height: 204rpx;
				background: linear-gradient(180deg, #F3FFD2 0%, rgba(255, 255, 255, 0) 100%);
				border-radius: 38rpx 38rpx 0rpx 0rpx;
			}

			.order-title {
				position: relative;
				z-index: 10;
				padding-left: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 31rpx;
				color: #474747;

				&.order-title1 {
					margin-top: 70rpx;
				}
			}

			.order-info {
				padding: 50rpx 48rpx;
				position: relative;
				z-index: 10;

				.item-bg {
					position: absolute;
					z-index: 1;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				.info-item {
					margin-bottom: 20rpx;

					&:last-child {
						margin-bottom: 0;
					}

					position: relative;
					z-index: 10;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.lable {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 23rpx;
						color: #666666;
					}

					.value {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 23rpx;
						color: #868686;
					}
				}

				.introduce {
					position: relative;
					z-index: 10;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #666666;
					line-height: 40rpx;
				}

				.photo {
					padding-bottom: 40rpx;
					position: relative;
					z-index: 10;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					image {
						margin-right: 10rpx;
						margin-top: 10rpx;
						width: 205rpx;
						height: 205rpx;
						border-radius: 30rpx;

						&:nth-child(3n) {
							margin-right: 0;
						}
					}
				}
			}

			.address {
				position: relative;
				width: 100%;
				padding: 56rpx 60rpx 60rpx;

				.address-bg {
					position: absolute;
					z-index: 1;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}

				.name {
					position: relative;
					z-index: 10;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 31rpx;
					color: #474747;
				}

				.info {
					margin-top: 20rpx;
					position: relative;
					z-index: 10;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #898989;
					width: 452rpx;
				}
			}
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 50rpx 0;

			.cancel,
			.confirm {
				width: 292rpx;
				height: 80rpx;
				border-radius: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 27rpx;
				text-align: center;
				line-height: 80rpx;
			}

			.cancel {
				margin-right: 40rpx;
				background-color: #fff;
				color: #666666;
				box-shadow: 1px 1px 1px rgba(245, 245, 245, 0.16);
			}

			.confirm {
				background-color: #3D3D3D;
				color: #B0DD67;
			}
		}


	}
</style>